import React, { useState } from 'react'
import { PlusOutlined } from '@ant-design/icons'
import {
  Row,
  Col,
  Flex,
  Typography,
  Button,
  Form,
  Input,
  Select,
  Table,
  Alert,
  message,
  Modal
} from 'antd'
import MyDatePicker from '../components/MyDatePicker'
import { useEffect } from 'react'
import {
  contentArticleDel,
  contentArticleEdit,
  contentArticleList
} from '../service/content'
import { Link, useNavigate } from 'react-router-dom'

function ContentTwitter() {
  const navigate = useNavigate()
  // 保存表格中选中的项
  const [selectedRowKeys, setSelectedRowKeys] = useState([])
  // 表格中是否有选中
  const hasSelected = selectedRowKeys.length > 0
  // 保存选择的日期
  const [selectedDateString, setSelectedDateString] = useState(null)
  // 模态框
  const [total, setTotal] = useState(0)
  const [pageNo, setPageNo] = useState(1)
  const [condition, setCondition] = useState({})
  const [n, setN] = useState(0)
  // 文章列表
  const [list, setList] = useState([])

  const request = async () => {
    const res = await contentArticleList({
      ...condition,
      pageNo: pageNo,
      pageSize: 10,
      articleStatus: 0
    })
    console.log(res)
    setTotal(res.data.total)
    setList(res.data.objects)
  }
  useEffect(() => {
    ;(async () => {
      const res = await contentArticleList({
        ...condition,
        pageNo: pageNo,
        pageSize: 10,
        articleStatus: 0
      })
      console.log(res)
      setTotal(res.data.total)
      setList(res.data.objects)
    })()
  }, [n])
  return (
    <>
      <Row className="info">
        <Col span={24}>
          <Flex justify={'space-between'}>
            <Typography.Title level={4}>信息管理</Typography.Title>
            <Button
              type="primary"
              icon={<PlusOutlined />}
              onClick={() => navigate('/admin/content/add')}
            >
              推文创作
            </Button>
          </Flex>
        </Col>
      </Row>
      <Row className="container">
        <Col span={24}>
          <Form layout="inline">
            <Form.Item label="文章标题：" name="articleTitle">
              <Input />
            </Form.Item>
            <Form.Item
              label="文章分类："
              name="articleCategoryId"
              initialValue={'0'}
            >
              <Select
                style={{ width: 120 }}
                options={[
                  {
                    value: '0',
                    label: '全部'
                  },
                  {
                    value: '1',
                    label: '启用'
                  },
                  {
                    value: '2',
                    label: '停用'
                  }
                ]}
              />
            </Form.Item>

            <Form.Item label="更新时间：">
              <MyDatePicker
                selectedDateString={selectedDateString}
                setSelectedDateString={setSelectedDateString}
              />
            </Form.Item>
            <Form.Item>
              <Button
                type="default"
                htmlType="reset"
                onClick={() => setSelectedDateString(null)}
              >
                重置
              </Button>
            </Form.Item>
            <Form.Item>
              <Button type="primary" htmlType="submit">
                查询
              </Button>
            </Form.Item>
          </Form>
        </Col>
      </Row>
      {/* 表格 */}
      <Row className="container">
        <Col span={24}>
          <Typography.Paragraph style={{ fontSize: 16 }}>
            推文列表
          </Typography.Paragraph>
          {hasSelected && (
            <Alert
              message={`已经选择 ${selectedRowKeys.length} 项`}
              type="info"
              showIcon
            />
          )}
        </Col>
        <Col span={24}>
          <Table
            rowKey="id"
            rowSelection={{
              selectedRowKeys,
              onChange: (newSelectedRowKeys) => {
                console.log('selectedRowKeys changed: ', newSelectedRowKeys)
                setSelectedRowKeys(newSelectedRowKeys)
              }
            }}
            dataSource={list}
            columns={[
              {
                title: '编号',
                dataIndex: 'id',
                key: 'id'
              },
              {
                title: '文章标题',
                dataIndex: 'articleTitle',
                key: 'articleTitle'
              },
              {
                title: '文章分类',
                dataIndex: 'articleCategory',
                key: 'articleCategory' // articleCategoryId
              },
              {
                title: '标签',
                dataIndex: 'articleLabel',
                key: 'articleLabel'
              },
              {
                title: '最后修改时间',
                dataIndex: 'updateTime',
                key: 'updateTime'
              },
              {
                title: '操作',
                dataIndex: 'op',
                key: 'op',
                align: 'center',
                render: (_, record) => {
                  return (
                    <span className="op">
                      <a
                        onClick={async () => {
                          const res = await contentArticleEdit({
                            id: record.id,
                            articleStatus: 1,
                            longitude: record.longitude,
                            latitude: record.latitude
                          })
                          console.log(res)
                          if (res.code === '0') {
                            message.success('上线成功')
                            setN(n + 1)
                          }
                        }}
                      >
                        上线
                      </a>
                      <Link to={`/admin/content/article/edit/${record.id}`}>
                        编辑
                      </Link>
                      <a
                        onClick={async () => {
                          const res = await contentArticleDel({
                            id: record.id
                          })
                          console.log(res)
                          if (res.code === '0') {
                            message.success('删除成功')
                            setN(n + 1)
                          } else {
                            message.error('删除失败')
                          }
                        }}
                      >
                        删除
                      </a>
                    </span>
                  )
                }
              }
            ]}
          />
        </Col>
      </Row>
    </>
  )
}

export default ContentTwitter
